<template>
  <div>

    <div class="drainageContent">
      <div class="formStatus">
        <el-form
          ref="payform"
          :model="ruleForm"
          label-width="120px"
          label-position="top"
          :rules="formRules"
        >
          <el-form-item
            label="引流规则名称"
            prop="name"
          >
            <el-input
              v-model="ruleForm.name"
              clearable
              placeholder="请输入分销方名称"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="引流方式"
            prop="scene"
          >
            <template slot="label">
              引流方式
              <el-tooltip
                class="item"
                effect="dark"
                placement="top"
              >
                <div
                  slot="content"
                  class="tooltipLine"
                >
                  <p>如短剧启用官方播放器组件,受接口限制，"播放页-自动弹窗" 无法弹出,其他浮标引流设置不受影响</p>
                </div>
                <i
                  class="el-icon-question"
                  style="margin-left:2px;font-size:16px;color:#86909C;"
                ></i>
              </el-tooltip>
            </template>
            <el-checkbox-group v-model="ruleForm.scene">
              <el-checkbox :label="'1'">播放页-浮标</el-checkbox>
              <el-checkbox :label="'2'">剧场页-浮标</el-checkbox>
              <el-checkbox :label="'3'">播放页-弹窗</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <div
            v-if=" ruleForm.scene && ruleForm.scene.indexOf('3')!==-1"
            class="pop_strategy"
          >
            <el-form-item
              label="播放页弹窗设置"
              prop="pop_strategy"
            >
              <el-radio-group v-model="ruleForm.pop_strategy">
                <el-radio :label="'1'">仅首集付费集弹</el-radio>
                <el-radio :label="'2'">每集付费集都弹</el-radio>
                <el-radio :label="'3'">仅设置集弹</el-radio>
                <el-radio :label="'4'">设置集及后每集都弹</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              v-if="ruleForm.pop_strategy==3 || ruleForm.pop_strategy==4"
              label="设置关注集"
              prop="num"
            >
              <el-select
                v-model="ruleForm.num"
                clearable
                placeholder="请选择"
                style="width:100%;"
              >
                <el-option
                  v-for="item in 50"
                  :key="item"
                  :label="'第'+item+'集'"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>

          <el-form-item
            label="关注公众号"
            prop="app_id"
          >
            <el-select
              v-model="ruleForm.app_id"
              placeholder="请选择公众号"
              style="width: 100%;"
              clearable
              remote
              filterable
              :remote-method="remoteMethod"
              @change="officialListResult"
            >
              <el-option
                v-for="(item,index) in optionsList.officialList"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="关注链接"
            prop="follow_link"
          >
            <el-input
              v-model="ruleForm.follow_link"
              placeholder="请输入"
            ></el-input>
            <p
              class="textInfo"
              style="margin-top:10px;"
            >1、登录mp.weixin.qq.com，发表公众号关注图文，获取链接</p>
            <p class="textInfo">2、注意该公众号需关联小程序，否则无法判断用户是否关注公众号，点击查看 <a
              href="https://developers.weixin.qq.com/miniprogram/introduction/#%E5%85%AC%E4%BC%97%E5%8F%B7%E5%85%B3%E8%81%94%E5%B0%8F%E7%A8%8B%E5%BA%8F"
              target="_black"
            >如何关联</a></p>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <span class="dialog-footer rowFlex">
      <el-button
        class="btn"
        @click="close"
      >取 消</el-button>
      <el-button
        :loading="btnLoading"
        class="btn"
        type="primary"
        @click="onSubmit"
      >确 定</el-button>
    </span>
  </div>
</template>

<script>
import { commonData, miniAppList } from '@/api/common'
import { flowSave } from '@/api/drainageRule'
export default {
  components: {},
  props: {
    rowInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      btnLoading: false,
      userInfo: {},
      sceneIndex: 0,
      editIndex: 0,
      handleType: 'add',
      dialogVisible: false,
      addAccount: false,
      tableData: [],
      sceneTextList: [
        {
          label: '播放页-浮标',
          value: '1'
        },
        {
          label: '剧场页-浮标',
          value: '2'
        },
        {
          label: '播放页-弹窗',
          value: '3'
        }
      ],
      optionsList: {
        weComBody: [],
        paycustomer_id: [],
        lookcustomer_id: [],
        tag_ids: [],
        officialList: [],
        numList: [],
        weComTemplateStyle: []
      },
      ruleForm: {
        scene: [],
        app_id: '',
        app_name: '',
        pop_strategy: 1,
        num: '',
        follow_link: '',
        name: ''
      },
      formRules: {
        name: [{ required: true, message: '请填写引流规则名称', trigger: 'change' }],
        media_type: [{ required: true, message: '请选择引流类型', trigger: 'change' }],
        scene: [{ required: true, message: '请选择引流方式', trigger: 'change' }],
        follow_link: [{ required: true, message: '请选输入关注链接', trigger: 'blur' }],
        template_id: [{ required: true, message: '请选择', trigger: 'change' }],
        app_id: [{ required: true, message: '请选择公众号', trigger: 'change' }],
        pop_strategy: [{ required: true, message: '请选择', trigger: 'change' }],
        num: [{ required: true, message: '请选择关注集', trigger: 'change' }]
      }
    }
  },
  mounted() {
    if (this.rowInfo.id) {
      this.ruleForm = JSON.parse(JSON.stringify(this.rowInfo))
      if (this.ruleForm.num == 0) {
        this.ruleForm.num = ''
      } else {
        this.ruleForm.num = Number(this.ruleForm.num)
      }
    }
    this.onGetMiniAppList()
    this.officialListType('')
  },
  methods: {
    remoteMethod(query) {
      this.officialListType(query)
    },
    drainageData() {
      const data = {
        mini_app_id: this.rowInfo.id
      }
      drainageData(data).then((res) => {
        if (res.data.flow_config) {
          this.ruleForm = res.data.flow_config
          this.officialListType('')
        } else {
        }
      })
    },
    onSubmit() {
      this.$refs.payform.validate(async (valid) => {
        if (valid) {
          this.confirmData()
        }
      })
    },
    async confirmData() {
      this.btnLoading = true
      if (this.ruleForm.scene.indexOf('3') === -1) {
        delete this.ruleForm.pop_strategy
        delete this.ruleForm.num
      }
      const data = {
        id: this.rowInfo ? this.rowInfo.id : '',
        ...this.ruleForm
      }
      flowSave(data)
        .then((res) => {
          this.btnLoading = false
          if (res.status_code == 1) {
            this.$message.success(res.msg)
            this.$emit('ok')
          }
        })
        .finally(() => {
          this.btnLoading = false
        })
    },
    showAccountLayer(item) {
      this.handleType = 'add'
      this.addAccount = true
      this.sceneIndex = item
      this.userInfo = {}
    },
    officialListResult(value) {
      if (value) {
        const item = this.optionsList.officialList.find((item) => item.value === value)
        this.ruleForm.app_name = item.label || ''
      }
    },
    handleClose() {
      this.ruleForm.mini_app_id = ''
      this.dialogVisible = false
      this.addAccount = false
    },
    // 小程序下拉
    async onGetMiniAppList() {
      const res = await miniAppList({
        weixin_blongs_id: this.rowInfo.weixin_blongs_id
      })
      if (res.status_code === 1) {
        this.optionsList.mini_app = res.data.filter((item) => {
          return item.id != this.rowInfo.id
        })
      }
    },
    // 公众号下拉
    async officialListType(name) {
      const res = await commonData({
        type: 'officialList',
        value: name,
        page: 1,
        page_size: 20
      })
      if (this.ruleForm.app_name && this.ruleForm.app_id && name === '') {
        if (!res.data.data.some((item) => item.value == this.ruleForm.app_id)) {
          res.data.data.unshift({
            label: this.ruleForm.app_name,
            value: this.ruleForm.app_id
          })
        }
        this.optionsList.officialList = res.data.data
      } else {
        this.optionsList.officialList = res.data.data
      }
    },
    formSubmit(value) {
      console.log(this.ruleForm, value, this.ruleForm['scene_' + this.sceneIndex][this.editIndex])
      if (this.handleType == 'add') {
        this.ruleForm['scene_' + this.sceneIndex].push(value)
      } else {
        this.ruleForm['scene_' + this.sceneIndex].splice(this.editIndex, 1)
        this.ruleForm['scene_' + this.sceneIndex].splice(this.editIndex, 0, value)
      }
    },

    sceneEdit(scope, item) {
      this.handleType = 'edit'
      this.sceneIndex = item
      this.editIndex = scope.$index
      this.userInfo = scope.row
      this.addAccount = true
    },
    sceneDel(scope, item) {
      this.ruleForm['scene_' + item].splice(scope.$index, 1)
    },
    close() {
      this.$emit('cancel')
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table__header-wrapper .el-table__cell {
  background: #eef0f3;
}
.rowFlex {
  z-index: 1000;
}
.drainageContent {
  padding: 20px;
  height: auto;
  padding-bottom: 100px;
}
.copy-main {
  display: flex;
  align-items: center;
}
.contentHandleF {
  background: #fff;
  margin-bottom: 20px;
}
.contentHandle {
  width: 100%;
  height: auto;
  background: #f7f8fa;
  border-radius: 3px;
  padding: 20px;
  .title {
    margin-bottom: 10px;
  }
  .subtitle {
    font-size: 14px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: bolder;
    color: #333333;
  }
}

.my-el-form {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
  .my-el-form-label {
    padding-right: 12px;
    display: flex;
    justify-content: end;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
  }
}
::v-deep .el-form-item__label {
  font-weight: bolder;
  color: #333333;
}
.pop_strategy {
  background: #f7f8fa;
  padding: 20px;
  padding-bottom: 10px;
  border-radius: 5px;
  margin-bottom: 20px;
}
.textInfo {
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 25px;
  color: #4E5969;
  a {
    color: #3491fa;
    text-decoration: underline;
  }
}
.copyBtn {
  border: none;
}
</style>